<template>
  <j-modal :title="null" :width="1300" :visible="visible" switchFullscreen @cancel="handleCancel" :footer="null">
    <div class="title">
      <label>{{ title }}</label>
      <template v-if="showType !== '3'">
        <a-button class="btn" @click="handleImport" style="margin-left: 20px">导入</a-button>
        <a-button class="btn" @click="handleDownload" style="margin-left: 8px">下载模板</a-button>
      </template>
    </div>
    <div class="content">
      <a-card title="指标信息" class="index-card">
        <div class="index-con">
          <div class="index-left">
            <a-tree
              v-if="treeData.length"
              :tree-data="treeData"
              v-model:checkedKeys="checkedKeys"
              :defaultExpandAll="true"
            >
              <template #title="row"
                ><span v-if="row.children && row.children.length > 0">{{ row.title }}</span
                ><span v-else style="color: #1890ff" @click="indexDetail(row)">{{ row.title }}</span>
              </template>
            </a-tree>
          </div>
          <div class="index-right">
            <a-form-model :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="指标名称" prop="indicatorName">
                    <a-input v-model="form.indicatorName" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="上级目录/上级指标" prop="seniorIndicator">
                    <a-input v-model="form.seniorIndicator" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="指标类型" prop="indicatorType">
                    <a-input :value="$filterDictTextByCache('indicator', form.indicatorType)" readOnly></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="加/减分基数（P）" prop="addCardinalNumber">
                    <a-input v-model="form.addCardinalNumber" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="任务量（Y）" prop="taskNumber">
                    <a-input v-model="form.taskNumber" placeholder="请输入" :readOnly="showType === '3'"> </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="基 数（Z）" prop="cardinalNumber">
                    <a-input v-model="form.cardinalNumber" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="是否可修正得分" prop="isScoreCorrection">
                    <a-input :value="$filterDictTextByCache('yn', form.isScoreCorrection)" readOnly></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="是否与上级共享评分" prop="isSharedScore">
                    <a-input :value="$filterDictTextByCache('yn', form.isSharedScore)" readOnly></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="上限分值" prop="upperScore">
                    <a-input v-model="form.upperScore" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="下限分值" prop="lowerScore">
                    <a-input v-model="form.lowerScore" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="权重 %（M）" prop="weight">
                    <a-input v-model="form.weight" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="是否禁用" prop="isDisable">
                    <a-input :value="$filterDictTextByCache('yn', form.isDisable)" readOnly></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="是否末级" prop="collectWay">
                    <a-input :value="$filterDictTextByCache('yn', form.collectWay)" readOnly></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="顺 序" prop="sort">
                    <a-input v-model="form.sort" readOnly></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="初评分值（N）" prop="firstScore">
                    <a-input v-model="form.firstScore" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="完成量（L）" prop="finishNumber">
                    <a-input v-model="form.finishNumber" readOnly> </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="是否允许分发" prop="isDistribution">
                    <a-input :value="$filterDictTextByCache('yn', form.isDistribution)" readOnly></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="采集方式" prop="collectionMethod">
                    <a-input
                      :value="$filterDictTextByCache('collectionMethod', form.collectionMethod)"
                      readOnly
                    ></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11">
                  <a-form-model-item label="审核机构" prop="auditOrgan">
                    <a-input :value="form.auditOrganName" readOnly> </a-input>
                    <!-- <a-input v-if="showType === '3'" :value="form.auditOrganName" disabled> </a-input>
                    <a-select v-else v-model="form.auditOrgan" style="width: 100%" allowClear>
                      <a-select-option v-for="(item, key) in collectModeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="11">
                  <a-form-model-item label="审核部门" prop="auditDepart">
                    <a-input :value="form.auditDepartName" readOnly> </a-input>
                    <!-- <a-input v-if="showType === '3'" :value="form.auditDepartName" disabled> </a-input>
                    <a-select v-else v-model="form.auditDepart" style="width: 100%" allowClear>
                      <a-select-option v-for="(item, key) in collectModeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select> -->
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11" class="col-2">
                  <a-form-model-item label="考核标准" prop="standardAssessment">
                    <a-textarea v-model="form.standardAssessment" readOnly :rows="3"></a-textarea>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </div>
      </a-card>
    </div>
    <div class="footerBox">
      <template v-if="showType !== '3'">
        <a-button class="btn" @click="handleCancel">取消</a-button>
        <a-button class="btn" @click="handleOk" style="margin-left: 8px" type="primary">确定</a-button>
      </template>
    </div>
  </j-modal>
</template>

<script>
import { getDictItemsFromCache } from '@/api/api'
import moment from 'moment'

export default {
  name: 'planIndexInfo',
  components: {},
  data() {
    return {
      visible: false,
      title: '指标信息',
      moment,
      form: {},
      isDisabled: true,
      treeData: [],
      checkedKeys: [],
      indexList: [],
      showType: '',
      indexTypeOpts: getDictItemsFromCache('indicator'),
      ynOpts: getDictItemsFromCache('yn'),
      collectModeOpts: getDictItemsFromCache('collectionMethod'),
    }
  },
  watch: {
    // 任务量
    'form.taskNumber': {
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          let row = this.indexList.find((el) => el.gradeIndicator === this.form.gradeIndicator)
          row.taskNumber = newVal
        }
      },
      immediate: true,
      // deep: true
    },
  },

  created() {},
  mounted() {},

  methods: {
    show(_row = {}, _showType = '') {
      this.form = {}
      this.showType = _showType
      this.treeData = _row.tree
      this.indexList = JSON.parse(JSON.stringify(_row.listSjskTableIndicatorDto))
      this.visible = true
    },

    // 指标详情
    indexDetail(_item) {
      this.form = this.indexList.find((el) => el.gradeIndicator === _item.key)
      console.log('indexDetail--', this.form)
    },

    handleImport() {},

    handleDownload() {},

    handleOk() {
      this.$emit('ok', this.indexList)
      this.handleCancel()
    },

    handleCancel() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.index-card {
  ::v-deep .ant-card-body {
    padding: 0;
  }
  .index-top {
    padding: 20px;
    border-bottom: 1px solid #ddd;
  }
  .index-con {
    display: flex;
    .index-left {
      width: 300px;
      padding: 20px;
      border-right: 1px solid #ddd;
    }
    .index-right {
      flex: 1;
      .tit {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        font-size: 16px;
        padding-left: 10px;
        background: #eee;
        width: 100%;
        padding: 16px;
        border-top: 1px solid #ddd;
      }
      ::v-deep .ant-form {
        padding-top: 20px;
      }
    }
  }
}
.col-3 {
  width: 100%;
  ::v-deep .ant-form-item-label {
    width: 7%;
  }
  ::v-deep .ant-form-item-control-wrapper {
    width: 67%;
  }
}
.col-2 {
  width: 100%;
  ::v-deep .ant-form-item-label {
    width: 15%;
  }
  ::v-deep .ant-form-item-control-wrapper {
    width: 73%;
  }
}
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  word-wrap: break-word;
  margin-top: -15px;
  height: 45px;
  display: flex;
  align-items: center;
}
.footerBox {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}
.content {
  height: 70vh;
  overflow-y: scroll;
}
::v-deep .ant-card-head {
  display: none;
  background: #eee;
}
::v-deep .ant-card-body {
  padding-bottom: 0;
}
</style>
